<template>
  <el-container class="home" v-loading="loading">
    <el-header>
      <div class="logo">
        <router-link to="/dashboard">
          <img src="@/assets/home/logo.png" alt="">
        </router-link>
      </div>
      <div class="page-name">{{ $route.meta.title === 'MeEdu后台管理' ? '主页' : $route.meta.title }}</div>
      <el-dropdown @command="handleClick" class="user-info">
        <span class="el-dropdown-link" v-html="user.name ? `${user.name}<i class='el-icon-arrow-down el-icon--right'></i>` : ''"></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="change">修改密码</el-dropdown-item>
          <el-dropdown-item command="out">安全退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-col :span="12">
          <el-menu :default-active="$route.matched[1].path" :unique-opened="true" :router="true" v-if="finish">
            <el-menu-item index="/dashboard">
                <i class="iconfont icon-icon-study-n"></i>
                <span>主页</span>
            </el-menu-item>
            <el-submenu
              :index="`${index}`"
              v-for="(item, index) in newMenu"
              :key="index">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item
                :index="`${sub.path}`"
                v-for="(sub, subIndex) in item.sub"
                :key="subIndex">
                {{ sub.title }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-aside>
      <router-view></router-view>
    </el-container>
  </el-container>
</template>

<script>
import { getUser, logout } from '@/network/user'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      loading:true,
      user: {},
      finish: false,
      menu: [
        {
          title: "装修",
          icon: "iconfont icon-icon-decorate",
          sub: [
            { title: "电脑端", path: "/decoration/pc", permission: "viewBlock" },
            { title: "移动端", path: "/decoration/h5", permission: "viewBlock" }
          ]
        },
        {
          title: "课程",
          icon: "iconfont icon-icon-lesson",
          sub: [{ title: "录播课", path: "/course/vod/index", permission: "course" }]
        },
        {
          title: "学员",
          icon: "iconfont icon-icon-me-n",
          sub: [{ title: "学员列表", path: "/member/index", permission: "member" }]
        },
        {
          title: "财务",
          icon: "iconfont icon-icon-money-n",
          sub: [
            { title: "全部订单", path: "/order/index", permission: "order" },
            { title: "余额提现", path: "/withdrawOrders", permission: "member.inviteBalance.withdrawOrders" }
          ]
        },
        {
          title: "运营",
          icon: "iconfont icon-icon-operate",
          sub: [
            { title: "VIP会员", path: "/role", permission:'role' },
            { title: "优惠码", path: "/promocode", permission: 'promoCode' },
            { title: "公众号", path: "/wechat/messagereply/index", permission: 'mpWechatMessageReply' }
          ]
        },
        {
          title: "系统",
          icon: "iconfont icon-icon-setting-n",
          sub: [
            { title: "管理人员", path: "/system/administrator", permission: "administrator" },
            { title: "系统配置", path: "/system/index", permission: "setting" },
            { title: "功能模块", path: "/system/application", permission: "super-slug" }
          ]
        }
      ]
    }
  },
  computed: {
    newMenu() {
      if(JSON.stringify(this.user) === '{}') return
      if(this.user.is_super) {
        return this.menu
      }else {
        let newMenu = []
        let menuItem = []
        for(let i = 0; i < this.menu.length; i++) {
          menuItem = this.menu[i]
          let children = []
          for(let j = 0; j < menuItem.sub.length; j++) {
            if(this.user.permissions.hasOwnProperty(menuItem.sub[j].permission)) {
              children.push(menuItem.sub[j])
            }
          }
          if(children.length !== 0) {
            menuItem.sub = children;
            newMenu.push(menuItem);
          }
        }
        return newMenu;
      }
    }
  },
  methods: {
    handleClick(command) {
      if(command === 'out') {
        logout().then(res => {
          if(res.status === 0) {
            localStorage.setItem('token', '')
            this.$store.commit('setIsLogin', false)
            this.$router.push({ path: '/' })
            Message.success('成功')
          }
        })
      }else if(command === 'change') {
        this.$router.push('/administrator/change-password')
      }
    }
  },
  created() {
    getUser().then(res => {
      this.user = res.data
      this.finish = true
      this.loading=false
    })
  }
}
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
  .el-header {
    display: flex;
    align-items: center;
    padding: 0;
    .logo {
      margin: 0 44px;
      img {
        width: 112px;
        height: 32px;
        margin-top: 26px;
      }
    }
    .page-name {
      flex: 1;
      padding-left: 20px;
      font-size: 20px;
      font-weight: 700;
    }
    .user-info {
      padding-right: 28px;
    }
  }
  .el-aside {
    .el-col-12 {
      width: 100%;
      padding-top: 20px;
      i {
        font-size: 24px;
        margin-right: 16px;
      }
      .el-menu {
        border-right: 0;
        .el-menu-item {
          &.is-active {
            background-color: #409eff;
            color: #fff;
          }
        }
        .el-submenu {
          .el-menu-item {
            padding-left: 68px!important;
          }
        }
      }
    }
  }
}
</style>